<template>
  <div class="main">
    <section class="sign-in-container">
      <div class="title">团队返佣奖励设置</div>
      <div class="remake">
        购买自营+招商品牌的零售商品上月确认收货后成交额（不含运费和退款金额）
      </div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="form"
      >
        <el-row class="form_item" v-for="(item, index) in list" :key="index">
          <el-form-item
            label="上月交易额"
            :prop="'list.' + index + '.tradeAmountStart'"
            :rules="rules.tradeAmountStart"
          >
            <el-input
              :disabled="index != 0"
              v-model="item.tradeAmountStart"
            ></el-input>
          </el-form-item>
          <el-form-item label="—" label-width="50px"></el-form-item>
          <el-form-item
            prop="money2"
            label-width="0"
            :prop="'list.' + index + '.tradeAmountEnd'"
            :rules="rules.tradeAmountEnd"
          >
            <el-input v-model="item.tradeAmountEnd"></el-input>
          </el-form-item>
          <el-form-item
            label="万元，购买返佣金"
            label-width="150px"
            :prop="'list.' + index + '.commissionRate'"
            :rules="rules.commissionRate"
          >
            <el-input v-model="item.commissionRate"></el-input>
          </el-form-item>
          <el-form-item label="%" prop="name"></el-form-item>
          <el-form-item label-width="0">
            <div class="form_item_btn_group">
              <el-button
                v-if="index == list.length - 1"
                type="success"
                @click="add"
                size="small"
                >添加</el-button
              >
              <el-button type="danger" @click="del(index)" size="small"
                >移除</el-button
              >
            </div>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="btn_group">
        <el-button type="primary" @click="save">确认保存</el-button>
      </div>
    </section>
  </div>
</template>

<script>
import { regexp } from '../../utils/tools'
export default {
  data() {
    return {
      form: {
        list: []
      },
      rules: {
        tradeAmountStart: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            pattern: regexp.twoSmallNumber,
            message: '最多为两位小数',
            trigger: 'blur'
          }
        ],
        tradeAmountEnd: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            pattern: regexp.twoSmallNumber,
            message: '最多为两位小数',
            trigger: 'blur'
          }
        ],
        commissionRate: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            pattern: regexp.oneToHundred,
            message: '必须为1-100的正整数',
            trigger: 'blur'
          }
        ]
      },
      list: []
    }
  },
  watch: {
    list: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        for (let i = 0; i < val.length; i++) {
          if (i >= val.length - 1) {
            return
          }
          val[i + 1].tradeAmountStart = val[i].tradeAmountEnd
        }
      },
      deep: true //true 深度监听
    }
  },
  created() {
    this.getData()
  },
  methods: {
    save() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        this.request({
          url: '/bsnl-activity/user/member/team/commission/config/save',
          method: 'post',
          data: {
            userMemberTeamCommissionConfigs: this.list
          }
        }).then(res => {
          if (res.status == 200) {
            this.$message.success('保存成功')
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    add() {
      this.list.push({})
    },
    del(index) {
      this.list.splice(index, 1)
    },
    getData() {
      this.request({
        url: '/bsnl-activity/user/member/team/commission/config/list',
        method: 'get'
      }).then(res => {
        if (res.status == 200) {
          this.list = res.data
          this.form.list = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
/deep/.el-form-item__label {
  padding: 0 !important;
}
.form_item_btn_group {
  display: flex;
}
/deep/ .el-form-item__label {
  text-align: center !important;
}
.el-col {
  display: flex;
  justify-content: center;
}
.btn_group {
  margin-top: 20px;
}
.title {
  font-size: 1.2rem;
  margin-bottom: 40px;
}
.remake {
  margin: 20px 0;
}
.el-form .el-input {
  width: 100% !important;
}
.form_item {
  display: flex;
  align-items: baseline;
  margin: 20px 0;
}
</style>
